<template>
	<view class="operateAddress">
		<view class="content">
			<view class="input">
				<text>收货人</text>
				<input v-model="data.obj.rcvName" placeholder-class="placeholder-class" type="text"
					placeholder="请填写收货人姓名" />
			</view>
			<view class="input">
				<text>手机号码</text>
				<input v-model="data.obj.rcvPhone" placeholder-class="placeholder-class" type="number"
					placeholder="请填写收货人手机号" />
			</view>
			<!-- <view class="select">
				<text>省市区</text>
				<input type="text" placeholder="请输入" v-model="data.obj.address" />
				<text :style="data.obj.address?'color:#262626;':''">{{data.obj.address || '省、市、区'}}</text>
				<view  @tap="handeAddress" >
					<image src="/static/img/index/58.png" mode="widthFix"></image>
				</view>
			</view> -->
			<view class="select address" @tap="handeAddress">
				<text>地址</text>
				<text :style="data.obj.address?'color:#262626;':''">{{data.obj.address || '请选择'}}</text>
				<image src="/static/img/index/58.png" mode="widthFix"></image>
			</view>
			<view class="input">
				<text>详细地址</text>
				<input v-model="data.obj.districtName" placeholder-class="placeholder-class" type="text"
					placeholder="街道、楼牌号" />
			</view>
			<view class="switch">
				<text>设置为默认地址</text>
				<u-switch active-color="#6B64D3" v-model="data.obj.defaultFlag" size="35"></u-switch>
			</view>
		</view>
		<view @tap="submit" class="bottom">
			保存
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { saveUserAddress, queryUserAddress } from '@/utils/api/address'
	const data = reactive<any>({
		obj: { defaultFlag: false }
	})
	const handeAddress = () => {
		uni.chooseLocation({
			success: (e) => {
				console.log(e,'eee')
				data.obj.districtName = e.name;
				data.obj.longitude = e.longitude;
				data.obj.latitude = e.latitude;
				data.obj.address = e.address;
			},
		})
	}
	onLoad(({ id }) => {
		if (id) {
			uni.setNavigationBarTitle({
				title: '编辑地址'
			})
			queryUserAddress({ data: { id } }).then((res) => {
				res.data.defaultFlag = res.data.defaultFlag == 'DEFAULT' ? true : false;
				data.obj = res.data;
			})
		}
	})
	const submit = () => {
		if (!data.obj.rcvName) {
			uni.showToast({
				title: '请输入名称',
				icon: 'none'
			})
			return;
		}
		if (!data.obj.rcvPhone) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return;
		}
		if (!data.obj.address) {
			uni.showToast({
				title: '请选择地址',
				icon: 'none'
			})
			return;
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		saveUserAddress({ data: { appUserAddress: { ...data.obj, defaultFlag: data.obj.defaultFlag ? 'DEFAULT' : 'NO_DEFAULT' } } }).then((res) => {
			if (res.code == 200) {
				uni.showToast({
					title: data.obj.id ? '编辑成功!' : '新增成功!',
					icon: 'none'
				})
				setTimeout(() => {
					uni.$emit('shippingAddress', data.obj.id ? { ...data.obj, defaultFlag: data.obj.defaultFlag ? 'DEFAULT' : 'NO_DEFAULT' } : '')
					uni.navigateBack()
				}, 1000)
			}
		})
	}
</script>

<style lang="scss">
	.operateAddress {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #F4F6FA;
		padding-bottom: 10rpx;

		.content {
			flex: 1;
		}

		.placeholder-class {
			color: #BFBFBF;
		}

		.input,
		.select,
		.switch {
			padding: 36rpx 32rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 36rpx;
			}

			input {
				flex: 1;
				margin-left: 24rpx;
			}
		}

		.address view {
			width: 100rpx;
			text-align: center;
		}

		.switch {
			margin-top: 24rpx;
		}

		.input {
			text {
				width: 120rpx;
			}
		}

		.select {
			text:nth-of-type(1) {
				width: 120rpx;
			}

			text:nth-of-type(2) {
				flex: 1;
				color: #BFBFBF;
				margin-left: 24rpx;
			}
		}

		.bottom {
			width: 630rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			line-height: 96rpx;
			text-align: center;
			border-radius: 80rpx;
			color: #fff;
			margin-top: 30rpx;
			font-size: 36rpx;
			background: #6B64D3;
		}
	}
</style>